<template>
  <div class="wrapper">
    <Header
      @handleNextClick="handleNextClick"
      :headline="'编辑收货地址'"
      :next="'保存'"
    />
    <div class="content">
      <div class="content__item">
        所在城市：<input
          type="text"
          v-model="city"
          class="content__item__inp"
        />
      </div>
      <div class="content__item">
        小区/大厦/学校：<input
          type="text"
          v-model="department"
          class="content__item__inp"
        />
      </div>
      <div class="content__item">
        楼号-门牌号：<input
          type="text"
          v-model="houseNumber"
          class="content__item__inp"
        />
      </div>
      <div class="content__item">
        收货人：<input type="text" v-model="name" class="content__item__inp" />
      </div>
      <div class="content__item">
        联系电话：<input
          type="text"
          v-model="phone"
          class="content__item__inp"
        />
      </div>
    </div>
  </div>
  <Toast v-if="show" :message="toastMessage" />
</template>

<script>
import Header from "./Header.vue";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { get, patch, post } from "../../utils/request";
import { useToastEffect } from "../../components/toast/Toast.vue";
import Toast from "../../components/toast/Toast.vue";
/**
 * 获取数据
 */
const useClickEffect = (ToastShow) => {
  const route = useRoute();
  const id = route.params.id;
  let city = ref("");
  let department = ref("");
  let houseNumber = ref("");
  let name = ref("");
  let phone = ref("");
  const getItem = async () => {
    const { data } = await get(`/api/user/address/${id}`);
    console.log(data);
    city.value = data.data.city;
    department.value = data.data.department;
    houseNumber.value = data.data.houseNumber;
    name.value = data.data.name;
    phone.value = data.data.phone;
  };
  /**
   * 更改地址信息
   */
  const handleNextClick = async () => {
    const id = route.params.id;
    const { data } = await post(`/api/user/updateAddress/${id}`, {
      id,
      city: city.value,
      department: department.value,
      houseNumber: houseNumber.value,
      name: name.value,
      phone: phone.value,
    });
    console.log(data);
    ToastShow("保存成功");
  };
  return {
    handleNextClick,
    city,
    department,
    houseNumber,
    name,
    phone,
    getItem,
  };
};

export default {
  name: "addressInfo",
  components: { Header, Toast },

  setup() {
    const { ToastShow, toastMessage, show } = useToastEffect();
    const {
      handleNextClick,
      city,
      department,
      houseNumber,
      name,
      phone,
      getItem,
    } = useClickEffect(ToastShow);
    getItem();
    return {
      handleNextClick,
      city,
      department,
      houseNumber,
      name,
      phone,
      toastMessage,
      show,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: $color-f8f8;
}
.content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.12rem;
  padding: 0 0.18rem;
  background-color: $color-fff;
  &__item {
    display: flex;
    font-size: 0.14rem;
    color: $color-666;
    width: 100%;
    height: 0.44rem;
    line-height: 0.44rem;
    border-bottom: 0.01rem solid $content-bgColor;
    &__inp {
      flex: 1;
      outline: none;
      border: none;
    }
    input::placeholder {
      color: $color-999;
    }
    &:last-child {
      border: none;
    }
  }
}
</style>